import React, { Component } from "react";

// 需要引入第三方的插件styled-components
import styled from "styled-components";

// Title表示的是一个组件
// .div表示这个组件最终会被渲染成div元素
// 模板字符串里面写的是css代码
// 可以安装vscode-styled-components插件，就有高亮和代码提示了
const Title = styled.div`
  color: green;
  /* font-size: 50px; */
  font-size: ${(props) => props.size + "px"};
`;

const Title2 = styled.p`
  color: red;
`;

class App extends Component {
  render() {
    return (
      <>
        <h2>在js文件里面写css</h2>
        <Title size="100">hello react!</Title>
        <Title size="50">hello react!</Title>
        <Title2>123456</Title2>
      </>
    );
  }
}

export default App;
